@charset "utf-8";
@import url(../styles/common.less);
html,body{
    width:100%;
    height:100%;
}


.box{
    width: 100%;    
    height: 100%;
    .bg{
    width: 375px;
      float: left;
      height: 100%;
      background: url(../img/banner.a0e6fbf0.jpg) ;
      background-size: 100% 100%;
      @media screen and (max-width: 1500px) {
        &{
            width: 375px;
        }
    }
    @media screen and (max-width: 1200px) {
        &{
            width: 200px;
        }
    }
    @media screen and (max-width: 1000px) {
        &{
            width: 0px;
        }
    }
       
    }
    .wrap{
        padding: 20px;
        padding-bottom: 100px;
        margin-left:375px ;
       overflow: hidden;
        position: relative;
        
        .wrap-search{
            width: 100%;
            overflow: hidden;
            .wrap-l{
                width: 174px;
                float: left;
                 img{
                float: left;
            }
            span{
                margin-left: 10px;
                line-height: 50px;
                font-size: 28px;
                font-weight: 400;

            }
            }
           .wrap-k{
               float: right;
               width: 380px;
               .list{
                 
                   li{
                       float: left;
                       line-height: 50px;
                       margin: 0 10px;
                       color: #ccc;
                     
                       &:not(:nth-child(4)):hover{  
                           color: orange;
                           cursor: pointer;
                          .caret{
                            transition: all 0.3s ;
                            transform: rotate(180deg);  
                          }
                       }
                       
                       
                   }
                   
                   
               }
           }
        }
        .wrap-o{
            display: inline-block;
        width: 100%;
        position: relative;
        >.wrap-l{
            padding: 40px 45px;
            margin: 0 auto 80px;
            position: relative;
            width: 450px;
            height: 600px;
            box-shadow: 0 20px 50px 0 hsl(0deg 0% 64% / 10%);
            >.wrap-l-title{
                position: relative;
                padding-bottom: 5px;
                >.login{
                    transition: all .3s;
                    left: 0;
                    color: #333;
                    cursor: pointer;
                    font-size: 22px;
                    float: left;
                    margin-right: 20px;
                }
                >.resgiter{
                    color: #BBB;
                    cursor: pointer;
                    font-size: 22px;
                    float: left;
                }
                >.wrap-bottom{
                    transition: left .3s;
                    left: 0;
                    width: 44px;
                    bottom: 1px;
                    position: absolute;
                    background-color: red;
                    height: 4px;
                    border-radius: 15px;
                }
            }
            .form-box{
                position: relative;
                width: 360px;
                height: 500px;
                overflow: hidden;
            }
            .form-login{
                position: absolute;
                width: 360px;
                height: 471px;
                top: 0;
                left: 0;
                transition: all .3s;
                
                .content{
                    width: 360px;
                    height: 375px;
                    padding: 20px 2px 0;
                    >.eye{
                        position: absolute;
                        font-size: 25px;
                        top: 122px;
                        right: 10px;
                        transition: all .5s;
                        color: rgba(0,0,0,.45);
                        &:hover{
                            color: rgba(0,0,0,.8);;
                        }
                    }
                    >.username{
                        padding: 30px 20px 10px;
                        width: 100%;
                        border-radius: 5px;
                        border: none;
                        background: rgba(0,0,0,0.05);
                        outline: none;
                    }
                    >.password{
                        outline: none;
                        margin-top: 30px;
                        border-radius: 5px;
                        padding: 30px 20px 10px;
                        border: none;
                        width: 100%;
                        background: rgba(0,0,0,0.05);
                    }
                    >.un-txt{
                        position: absolute;
                        top: 36px;
                        left: 20px;
                        transition: all .05s;
                        font-weight: 100;
                        color: rgba(0,0,0,0.3);
                    }
                    >.pwd-txt{
                        position: absolute;
                        transition: all .05s;
                        top: 124px;
                        left: 20px;
                        font-weight: 100;
                        color: rgba(0,0,0,0.3);
                    }
                    >.submit{
                        width: 100%;
                        margin-top: 30px;
                        opacity: 0.4;
                        color: #fff;
                        background-color: #ff5c00;
                        border: none;
                        font-size: 18px;
                        height: 60px;
                        border-radius: 5px;
                        &:hover{
                            background: #ff7e29;
                        }
                    }
                    >.user-action{
                        margin-top: 10px;
                        color: red;
                        >.mima{
                            cursor: pointer;
                        }
                        >.phone{
                            float: right;
                            cursor: pointer;
                        }
                    }
                }
                .mini-login{
                    width: 360px;
                    >.mini-title{
                        text-align: center;
                        color: rgba(0,0,0,0.3);
                    }
                    >.mini-list{
                        padding: 15px 25px;
                        >.mini-item{
                            margin:0 15px;
                            float: left;
                            cursor: pointer;
                            >img{
                                width: 46px;
                                height: 46px;
                            }
                        }
                    }
                }
            }

            .form-reg{
                position: absolute;
                top: -2px;
                right:-600px;
                width: 360px;
                transition: right .3s;
                >.form-content{
                    min-height: 345px;
                    padding: 20px 2px 0;
                    >.select-field{
                        width: 100%;
                        >.select-field-field{
                            border-radius: 4px;
                            border: 1px solid rgba(0,0,0,0);
                            background: #f9f9f9;
                            position: relative;
                            overflow: hidden;
                            display: table;
                            border-collapse: separate;
                            border-spacing: 0;
                            width: 100%;
                            transition: all .3s cubic-bezier(.645,.045,.355,1);
                            user-select: none;
                            >.select-field-control{
                                position: relative;
                                display: table-cell;
                                width: 100%;
                                >.select-ant{
                                    width: 100%;
                                    font-size: 17px;
                                    font-weight: 400;
                                    color: #333;
                                    >.select-ant-box{
                                        background: rgba(0,0,0,0);
                                        border: none;
                                        box-shadow: none;
                                        height: 60px;
                                        position: relative;
                                        cursor: pointer;
                                        display: block;
                                        box-sizing: border-box;
                                        border-radius: 4px;
                                        outline:none;
                                        transition: all .3s cubic-bezier(.645,.045,.355,1);
                                        user-select: none;
                                        font-size: 17px;
                                        font-weight: 400;
                                        color: #333;
                                        >.ant-select-rendered{
                                            padding-top: 30px;
                                            line-height: 20px;
                                            margin-left: 20px;
                                            margin-right: 24px;
                                            position: relative;
                                            display: block;
                                            cursor: pointer;
                                            font-size: 17px;
                                            font-weight: 400;
                                            color: #333;
                                            >.ant-select-value{
                                                display: block;
                                                opacity: 1;
                                                float: left;
                                                max-width: 100%;
                                                overflow: hidden;
                                                white-space: nowrap;
                                                text-overflow: ellipsis;
                                                line-height: 20px;
                                                cursor: pointer;
                                                user-select: none;
                                                font-size: 17px;
                                                font-weight: 400;
                                                color: #333;
                                            }
                                        }
                                        >.ant-select-arrow{
                                            user-select: none;
                                            pointer-events: none;
                                            margin-top: -10px;
                                            font-size: 25px;
                                            display: inline-block;
                                            font-style: normal;
                                            text-align: center;
                                            text-transform: none;
                                            position: absolute;
                                            top: 50%;
                                            right: 10px;
                                            color: inherit;
                                            transform: rotate(90deg);
                                        }
                                    }
                                }
                                >.floating-label{
                                    cursor: pointer;
                                    top: 6px;
                                    font-size: 12px;
                                    color: #aaa;
                                    user-select: none;
                                    position:absolute;
                                    left: 20px;
                                    height: 20px;
                                    font-weight: 400;
                                    line-height: 20px;
                                    transition: top .15s cubic-bezier(.4,0,.2,1),font-size .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1);
                                    max-width: calc(100% - 20px);
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    overflow: hidden;
                                }
                            }
                        }
                    }
                    >.text-field{
                        margin-top: 20px;
                        >.text-field-field{
                            border-radius: 4px;
                            border: 1px solid rgba(0,0,0,0);
                            background: #f9f9f9;
                            position: relative;
                            overflow: hidden;
                            display: table;
                            border-collapse: separate;
                            border-spacing: 0;
                            width: 100%;
                            transition: all .3s cubic-bezier(.645,.045,.355,1);
                            user-select: none;
                            >.input-adornment{
                                width: 40%;
                                display: table-cell;
                                vertical-align: middle;
                                >.calling{
                                    width: 100%;
                                    border-collapse: separate;
                                    border-spacing: 0;
                                    user-select: none;
                                    text-align: left;
                                    >.calling-field{
                                        position: relative;
                                        overflow: hidden;
                                        display: table;
                                        border-collapse: separate;
                                        border-spacing: 0;
                                        width: 100%;
                                        transition: all .3s cubic-bezier(.645,.045,.355,1);
                                        user-select:none;
                                        >.calling-field-control{
                                            position: relative;
                                            display: table-cell;
                                            width: 100%;
                                            >.ant-calling{
                                                width: 100%;
                                                font-size: 147px;
                                                font-weight: 400;
                                                color: #333;
                                                >.ant-calling-box{
                                                    background: rgba(0,0,0,0);
                                                    border: none;
                                                    box-shadow: none;
                                                    height: 60px;
                                                    position: relative;
                                                    cursor: pointer;
                                                    display: block;
                                                    border-radius: 4px;
                                                    outline: none;
                                                    transition: all .3s cubic-bezier(.645,.045,.355,1);
                                                    user-select: none;
                                                    font-size: 17px;
                                                    font-weight: 400;
                                                    color: #333;
                                                    >.ant-calling-rendered{
                                                        padding-top: 30px;
                                                        line-height: 20px;
                                                        margin-left: 20px;
                                                        margin-right: 24px;
                                                        position:relative;
                                                        display: block;
                                                        >.ant-calling-value{
                                                            display: block;
                                                            opacity: 1;
                                                            float: left;
                                                            max-width: 100%;
                                                            overflow: hidden;
                                                            white-space: nowrap;
                                                            text-overflow:ellipsis;
                                                            line-height: 20px;
                                                            cursor: pointer;
                                                            user-select: none;
                                                            font-size: 17px;
                                                            font-weight: 400;
                                                            color: #333;
                                                        }
                                                    }
                                                    >.ant-calling-arrow{
                                                        user-select: none;
                                                        pointer-events: none;
                                                        right: 21px;
                                                        margin-top: -10px;
                                                        transform: rotate(90deg);
                                                        position: absolute;

                                                        font-size: 20px;
                                                    }
                                                }
                                            }
                                            >.calling-label{
                                                cursor: pointer;
                                                top: 6px;
                                                font-size: 12px;
                                                color: #aaa;
                                                position: absolute;
                                                user-select: none;
                                                left: 20px;
                                                height: 20px;
                                                font-weight: 400;
                                                line-height: 20px;
                                                transition: top .15s cubic-bezier(.4,0,.2,1),font-size .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1);
                                                max-width: calc(100% - 20px);
                                                text-overflow: ellipsis;
                                                white-space: nowrap;
                                                overflow: hidden;
                                            }
                                        }
                                    }
                                }
                            }
                            >.text-field-control{
                                position: relative;
                                display: table-cell;
                                width: 100%;
                                border-collapse: separate;
                                border-spacing: 0;
                                user-select: none;
                                >.phone{
                                    height: 60px;
                                    outline: none;
                                    appearance: none;
                                    border: none;
                                    font-size: 17px;
                                    color: #333;
                                    line-height: 20px;
                                    background: rgba(0,0,0,0);
                                }
                                >.phone-num{
                                    cursor: text;
                                    user-select: none;
                                    position: absolute;
                                    left: 20px;
                                    top: 20px;
                                    height: 20px;
                                    font-weight: 400;
                                    font-style: 17px;
                                    color: rgba(0,0,0,.4);
                                    transition: top .15s cubic-bezier(.4,0,.2,1),font-size .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1);
                                    max-width: calc(100% - 20px);
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    border-collapse: separate;
                                    border-spacing: 0;
                                    overflow: hidden;
                                }
                            }
                        }
                    }
                    >.ticket-field{
                        margin-top: 20px;
                        >.ticket-field-field{
                            border-radius: 4px;
                            border: 1px solid rgba(0,0,0,0);
                            background: #f9f9f9;
                            position: relative;
                            overflow: hidden;
                            display: table;
                            border-collapse: separate;
                            border-spacing: 0;
                            width: 100%;
                            transition: all .3s cubic-bezier(.645,.045,.355,1);
                            user-select: none;
                            font-style: 14px;
                            color: rgba(0,0,0,.65);
                            line-height: 1.5;
                            >.ticket-field-control{
                                position:relative;
                                display: table-cell;
                                width: 100%;
                                >.ticket-field-input{
                                    border-collapse:separate;
                                    border-spacing:0;
                                    user-select: none;
                                    >.ticket-field-text{
                                        padding-left: 20px;
                                        height: 60px;
                                        outline: none;
                                        appearance: none;
                                        font-size: 17px;
                                        color: #333;
                                        line-height: 20px;
                                        border: none;
                                        background: rgba(0,0,0,0);
                                    }
                                    >.ticket-field-label{
                                        cursor: text;
                                        user-select: none;
                                        position: absolute;
                                        left: 20px;
                                        top: 20px;
                                        height: 20px;
                                        font-weight: 400;
                                        font-size: 17px;
                                        color: rgba(0,0,0,.4);
                                        transition: top .15s cubic-bezier(.4,0,.2,1),font-size .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1);
                                        line-height: 20px;
                                        max-width: calc(100% - 20px);
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        overflow: hidden;
                                    }
                                }
                            }
                            >.ticket-field-adornment{
                                display: table-cell;
                                vertical-align: middle;
                                border-collapse:separate;
                                border-spacing: 0;
                                cursor: pointer;
                                user-select: none;
                                >.yzm{
                                    outline: none;
                                    color: #ff5c00;
                                    background-color: rgba(27, 25, 25, 0);
                                    border-color: rgba(0,0,0,0);
                                    box-shadow: none;
                                    white-space: nowrap;
                                    padding: 0 15px;
                                }
                            }
                        }
                    }
                    >.reg-btn{
                        margin-top: 20px;
                        margin-bottom: 10px;
                        width: 100%;
                        opacity: .4;
                        color: #fff;
                        cursor: pointer;
                        background-color: #ff5c00;
                        height: 60px;
                        border: none;
                        position: relative;
                        text-align: center;
                        overflow: hidden;
                        white-space: nowrap;
                        padding: 0 20px;
                        font-size: 18px;
                        font-weight: 400;
                        line-height: 60px;
                        border-radius: 4px;
                        transition: all .3s cubic-bezier(.645,.045,.355,1);
                        &:hover{
                            opacity: .3;
                        }
                    }
                    >.form-actions{
                        width: 100%;
                        cursor: default;
                        opacity: .4;
                        color: #fff;
                        >.form-actions-start{
                            float: left;
                            font-size: 17px;
                            margin-bottom: 10px;
                            max-width: 100%;
                            >.link{
                                font-size: 17px;
                                display: block;
                                color: #ff5c00;
                                text-decoration: none;
                                background-color: rgba(0,0,0,0);
                                outline: none;
                                cursor: pointer;
                                transition: color .3s;
                            }
                        }
                    }
                }
                >.accept-terms{
                    font-size: 14px;
                    font-weight: 400;
                    color: #aaa;
                    line-height: 20px;
                    text-align: center;
                    padding-bottom: 10px;
                    >a{
                        color: #333;
                    }
                }
                >.sns-login{
                    >.sns-login-title{
                        text-align: center;
                        font-size: 17px;
                        font-weight: 400;
                        color: #aaa;
                        line-height: 40px;
                    }
                    >.sns-login-content{
                        height: 46px;
                        overflow: hidden;
                        margin-top: 10px;
                        >.sns-login-list{
                            text-align: center;
                            width: 100%;
                            >.sns-login-item{
                                display: inline-block;
                                width: 46px;
                                margin: 0 12px;
                                >.sns-login-icon{
                                    display: block;
                                    margin: 0 auto;
                                    font-size: 46px;
                                    width: 46px;
                                    height: 46px;
                                    border-radius: 223px;
                                    overflow: hidden;
                                }
                            }
                        }
                    }
                }
            }
        }
     
        }
        .foot{
            text-align: center;
            padding: 0 20px;
            font-size: 12px;
            color: #999;
            position: absolute;
            right: 0;
            left: 0;
            bottom: 20px;
            a{
                color: #999;
            }
        }
    }
}